<template>
<HomePanel title="热门品牌" sub-title="国际经典 品质保证">
    <template v-slot:right>
        <a @click="toggle(-1)" :class="{disabled:index===0}" href="javascript:;" class="iconfont icon-angle-left prev"></a>
        <a @click="toggle(1)" :class="{disabled:index===1}" href="javascript:;" class="iconfont icon-angle-right next"></a>
    </template>
    <div class="box" ref="target">
        <Transition name="fade">
            <ul v-if="brands.length" class="list" :style="{ transform: `translateX(${-index * 1240}px)` }">
                <li v-for="item in brands" :key="item.id">
                    <router-link to="/">
                        <img :src="item.picture" alt="">
                    </router-link>
                </li>
            </ul>
            <div v-else class="skeleton">
                <XtxSkeleton 
                class="item" v-for="i in 5" 
                :key="i" animated 
                bg="#e4e4e4" 
                width="240px" 
                height="305px">
                </XtxSkeleton>
            </div>
        </Transition>
    </div>
</HomePanel>
</template>

<script>
import HomePanel from './home-panel.vue';
import {ref} from 'vue';
import {findBrand} from '@/api/home';
import {lazyLoadingData} from '@/hooks';
import { storeToRefs } from 'pinia';
export default {
    name: 'HomeBrand',
    components: {
        HomePanel,
    },
    setup() {
        const brands = ref([])
        const Brand = async (limit) => {
            const {
                data: {
                    result
                }
            } = await findBrand(limit)
            brands.value = result
        }

        const {target} = storeToRefs(lazyLoadingData(()=>Brand(10)))

        const index = ref(0)

        const toggle = (step) => {
            const newindex = index.value + step
            if (newindex < 0 || newindex > 1) return
            index.value = newindex
        }

        return {
            toggle,
            brands,
            index,
            target,
        }
    }
}
</script>

<style lang="less" scoped>
.home-panel {
    background: #f5f5f5
}

.iconfont {
    width: 20px;
    height: 20px;
    background: #ccc;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    background: @xtxColor;

    &::before {
        font-size: 12px;
        position: relative;
        top: -2px
    }

    &.disabled {
        background: #ccc;
        cursor: not-allowed;
    }
}

.box {
    display: flex;
    width: 100%;
    height: 345px;
    overflow: hidden;
    padding-bottom: 40px;

    .list {
        width: 200%;
        display: flex;
        transition: all 1s;

        li {
            margin-right: 10px;
            width: 240px;

            &:nth-child(5n) {
                margin-right: 0;
            }

            img {
                width: 240px;
                height: 305px;
            }
        }
    }
    .skeleton {
        width: 100%;
        display: flex;
        .item {
            margin-right: 10px;
            &:nth-child(5n) {
                margin-right: 0;
            }
        }
  }
}
</style>
